<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :label-position="labelPosition">
            <el-row>
              <el-col v-bind="grid">
                <el-form-item label="昵称：">
                  <el-input
                    v-model="userFrom.keyword"
                    placeholder="请输入昵称"
                    clearable
                    class="selWidth"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="姓名：">
                  <el-input v-model="userFrom.name" placeholder="请输入姓名" clearable class="selWidth" />
                </el-form-item>
              </el-col>
              <!-- <el-col v-bind="grid">
                <el-form-item label="类型：">
                    <el-select v-model="userFrom.type" placeholder="请选择">
                        <el-option key="H5" label="H5" value="H5"></el-option>
                        <el-option key="PC" label="PC" value="PC"></el-option>
                        <el-option key="小程序" label="小程序" value="小程序"></el-option>
                    </el-select>
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col v-bind="grid">
                <el-button
                  type="primary"
                  icon="ios-search"
                  label="default"
                  class="mr15"
                  size="small"
                  @click="userSearchs"
                >搜索</el-button>
                <el-button
                  class="ResetSearch mr10"
                  size="small"
                  type="reset"
                  @click="reset('userFrom')"
                >重置</el-button>
                <el-button
                  type="primary"
                  icon="ios-search"
                  label="default"
                  class="mr15"
                  size="small"
                  @click="exportExcel"
                >导出名片信息</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table id="educe-table" :data="tableData.data" style="width: 100%;" size="small">
        <el-table-column prop="uid" label="ID" min-width="40" />
        <el-table-column label="头像" min-width="50">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.avatar ? scope.row.avatar : moren"
                :preview-src-list="[scope.row.avatar || moren]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" min-width="120" />
        <el-table-column label="推荐人" prop="spread_name" min-width="120" />
        <el-table-column label="联系电话" prop="phone" min-width="120" />
        <el-table-column label="邮箱" prop="email" min-width="120" />
        <el-table-column label="微信号" prop="wechat" min-width="120" />
        <el-table-column label="微信二维码" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.wechat_img" class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.wechat_img"
                :preview-src-list="[scope.row.wechat_img]"
              />
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="职位" prop="position_name" min-width="120" />
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="onWeatch(scope.row)">
                小程序码</el-button>
              <el-button type="text" size="small" @click="editCard(scope.row)">编辑名片</el-button>
              <el-button
                type="text"
                size="small"
                @click="setBoss(scope.row)"
              >{{ scope.row.is_boss==1 ? '取消BOSS' : '设为BOSS' }}</el-button>
              <el-button type="text" size="small" @click="deleteCard(scope.row)">取消名片</el-button>
              <!-- <el-button type="text" size="small" @click="onDetails(scope.row)">详情</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="userFrom.limit"
          :current-page="userFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
      <!--会员详情-->
      <el-dialog
        v-if="visibleDetail"
        title="用户详情"
        :visible.sync="visibleDetail"
        width="1000px"
        :before-close="Close"
      >
        <user-details v-if="visibleDetail" ref="userDetails" :uid="uid" :row="row" />
      </el-dialog>
      <!-- 小程序码弹窗 -->
      <el-dialog title="小程序码" :visible.sync="dialogForm" width="500px">
        <div class="xss">
          <div class="oimg">
            <img :src="oimg" alt="">
          </div>
          <div>
            <el-button type="primary" @click="downloadApplete">下载名片码</el-button>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getUserList, setBoss, editCard, deleteCard } from '@/api/buss'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import userDetails from './userDetails'
export default {
  name: 'UserList',
  components: {
    userDetails
  },
  filters: {
    // 处理到期时间
    tiem: function(createTime) {
      var date = new Date(createTime * 1000)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      return year + '年' + month + '月' + day + '日'
    }
  },
  data() {
    return {
      // 失败图片
      moren: require('@/assets/images/f.png'),
      // 展示数据
      tableData: {
        data: [],
        total: 0
      },
      // 详情弹窗显示条件
      visibleDetail: false,
      row: '',
      labelPosition: 'right',
      userFrom: {
        keyword: '',
        name: '',
        type: '',
        page: 1,
        limit: 20
      },
      grid: {
        xl: 6,
        lg: 6,
        md: 12,
        sm: 24,
        xs: 24
      },
      uid: '',
      row: '',
      //  小程序码弹窗
      dialogForm: false,
      //  小程序码弹窗展示二维码
      oimg: ''
    }
  },
  mounted() {
    // 获取名片列表
    this.userList()
  },
  methods: {
    // 导出文件
    exportExcel() {
      // 1.生成Excel工作簿对象
      // var wb = XLSX.utils.table_to_book(document.querySelector('#educe-table'))
      // 2.手机号，身份证号等会默认使用科学计数法表示，则需要这样设置
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#educe-table'),
        { raw: true }
      )
      // 获取二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        book: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
          // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
          new Blob([wbout], { type: 'appliction/octet-stream' }),
          // 设置导出的文件名称可随意
          '名片信息.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
      return wbout
    },
    // 设置boss
    setBoss(row) {
      setBoss({
        uid: row.uid,
        type: 'is_boss'
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('设置成功')
          this.userList()
        }
      })
    },
    // 编辑名片
    editCard(row) {
      console.log(row.uid)
      this.$modalForm(editCard(row.uid, 'minp')).then(res => {
        this.userList()
      })
    },
    // 删除名片
    deleteCard(row) {
      this.$modalSure('取消该名片').then(res => {
        deleteCard({
          uid: row.uid
        }).then(res => {
          this.$message.success(res.message)
          this.userList()
        })
      })
    },
    // 小程序码
    onWeatch(row) {
      console.log(row)
      this.dialogForm = true
      this.oimg = row.qrcode_url
    },
    // 下载小程序码
    downloadApplete() {
      window.open(this.oimg)
    },
    // 点击详情
    onDetails(row) {
      this.row = row
      this.uid = row.uid
      this.visibleDetail = true
    },
    // 获取名片列表
    userList() {
      getUserList(this.userFrom).then(res => {
        if (res.status == 200) {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
        }
        console.log(this.tableData.data)
      })
    },
    // 搜索
    userSearchs() {
      getUserList(this.userFrom).then(res => {
        if (res.status == 200) {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
        }
      })
    },
    // 重置
    reset() {
      this.userFrom = {
        keyword: '',
        page: 1,
        limit: 20
      }
      this.userList(this.userFrom)
    },
    // 更好展示页面
    pageChange(page) {
      this.userFrom.page = page
      this.userList(this.userFrom)
    },
    // 更换展示数量
    handleSizeChange(val) {
      this.userFrom.limit = val
      this.userList(this.userFrom)
    }
  }
}
</script>

  <style lang="scss" scoped>
.spBlock {
  cursor: pointer;
  display: block;
  padding: 5px 0;
}

.check {
  color: #00a2d4;
}
.selWidth {
  width: 100% !important;
}

.dia {
  /deep/ .el-dialog__body {
    height: 700px !important;
  }
}

.text-right {
  text-align: right;
}

.container {
  min-width: 821px;

  /deep/.el-form-item {
    width: 100%;
  }
  /deep/ .el-select{
    width: 100%;
  }

  /deep/.el-form-item__content {
    width: 80%;
  }
}

.vipName {
  color: #dab176;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

/deep/[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: none !important;
}
.box-container {
  overflow: hidden;
}
.box-container .list {
  line-height: 40px;
  display: flex;
  align-items: center;
}

.box-container .list .name {
  display: inline-block;
  width: 100px;
  text-align: right;
  color: #606266;
}
.box-container .list .blue {
  color: #1890ff;
}
//.box-container .list.image {
//  margin-bottom: 40px;
//}
//.box-container .list.image img {
//  position: relative;
//  top: 40px;
//}
.xss{
    text-align: center;
    .oimg{
      margin: auto;
      width :300px;
      height :300px;
      margin-bottom: 20px;
      img{
        width:100%;
        height :100%;
      }
    }
  }
</style>
